<!-- 修改昵称页面 -->

{{extend '../_layouts/home.html'}} {{block 'title'}}{{'多人博客 - 首页'}}{{/block}} {{block 'body'}}
<section class="container">
    <link rel="stylesheet" href="../../public/css/settings.css"> {{include '../_partials/settings-nav.html'}}
    <div class="col-md-5">
        <form action="/settings/admin/2" method="post" id="form1" enctype="multipart/form-data">
            <input type="hidden" name="id" value="{{ user._id }}" id="id">
            <div class="form-group">
                <label for="exampleInputEmail1">账号</label>
                <p class="form-control-static"> {{ user.email }}</p>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">昵称</label>
                <input type="name" class="form-control" id="exampleInputPassword1" value="{{ user.nickname }}" name="nickname">
            </div>

            <button type="submit" class="btn btn-success">修改</button>
        </form>
    </div>
    <div class="col-md-2 profile-avatar">
        <dl>
            <dt>头像设置</dt>
            <dd>
                <div class="avatarDiv">
                    <!-- ../static/upload/1648371106056.png -->
                    <img class="avatar" width="150" height="150" src="../{{user.avatar}}" alt="" id="img_id">
                    <input type="file" name="avatar" onchange="showImg()" id="img_file" form="form1">
                </div>

                <div>
                    <button class="btn btn-default" onclick="postImg()">修改头像</button>
                </div>
            </dd>
        </dl>
    </div>
</section>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script>
    // $('#form1').on('submit', function(e) {
    //     e.preventDefault()
    //         // var formData = $(this)

    //     const id = $('#id')[0].value
    //     const nickname = $('#exampleInputPassword1')[0].value
    //     const avatar = $('#img_id')[0].src
    //     const data = {
    //             id: id,
    //             nickname: nickname,
    //             avatar: avatar
    //         }
    //         // formData = formData + '&' + url
    //     console.log(data)
    //     $.ajax({
    //         url: 'http://127.0.0.1:5000/settings/admin/2',
    //         type: 'post',
    //         data: data,
    //         dataType: 'json',
    //         success: function(data) {
    //             // var err_code = data.err_code
    //             // if (err_code === 0) {
    //             //     // window.alert('注册成功！')
    //             //     // 服务端重定向针对异步请求无效
    //             //     window.location.href = '/'
    //             // } else if (err_code === 1) {
    //             //     window.alert('邮箱或者密码错误')
    //             // } else if (err_code === 500) {
    //             //     window.alert('服务器忙，请稍后重试！')
    //             // }
    //         }
    //     })
    // })

    function showImg() {
        var file = document.getElementById('img_file').files[0];
        console.log(file);
        var re = new FileReader();
        re.readAsDataURL(file);

        re.onload = function(re) {
            console.log(re.target.result);
            $('#img_id').attr("src", re.target.result);
        }
    }

    function postImg() {
        let url = $('#img_id')[0].src
        console.log(url);
    }
</script>
{{/block}}